<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-12-12 15:51:07
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-12 16:29:09
 * @FilePath: \blog\src\components\form\upload\upload.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="margin-bottom: 30px">
    {{ title }}({{fileList.length}}/{{limit}})：(最多添加{{ limit }}张图片)
  </div>
  <el-upload
    v-model:file-list="fileList"
    :class="{ styleA: fileList.length !=limit, styleB: fileList.length === limit }"
    accept="image/jpeg,image/jpg,image/png"
    :limit="limit"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>


<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";

// 图片
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

onMounted(() => {});

const props = defineProps({
  title: {
    type: String,
    default: "添加图片",
  },
  limit: {
    type: Number,
    default: 1,
  },
});

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>


<style lang="scss">
// 删除右上角的tip提示
.el-icon--close-tip {
  display: none !important;
}
.styleA .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.styleB .el-upload--picture-card {
  display: none;
}
</style>